<template>
    <div class="pagebody">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 商品类型管理 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!-- <div class="search-box">
                <el-form>
                    <el-form-item label="一级类型" prop="TypeAList">
                        <el-button type="primary" icon="el-icon-plus" @click="handleAddTypeA">新增一级类型</el-button>
                        <el-radio-group v-model="currentTypeAid" @change="TypeAChange">
                            <el-radio-button v-for="item in TypeAList" :key="item.id" :label="item.id">{{ item.name }} </el-radio-button>
                        </el-radio-group>
                        <el-button type="primary" icon="el-icon-edit" @click="handleEditTypeA" v-if="currentTypeAid != ''"
                            >编辑一级类型</el-button
                        >
                        <el-button type="primary" icon="el-icon-delete" @click="handleDeleteTypeA" v-if="currentTypeAid != ''"
                            >删除一级类型</el-button
                        >
                    </el-form-item>
                    <el-form-item label="二级类型" prop="TypeBList">
                        <el-button type="primary" icon="el-icon-plus" @click="handleAddTypeB" v-if="currentTypeAid != ''"
                            >新增二级类型</el-button
                        >
                        <el-radio-group v-model="currentTypeBid" @change="TypeBChange">
                            <el-radio-button v-for="item in TypeBList" :key="item.id" :label="item.id">{{ item.name }}</el-radio-button>
                        </el-radio-group>
                        <el-button type="primary" icon="el-icon-edit" @click="handleEditTypeB" v-if="currentTypeBid != ''"
                            >编辑二级类型</el-button
                        >
                        <el-button type="primary" icon="el-icon-delete" @click="handleDeleteTypeB" v-if="currentTypeBid != ''"
                            >删除二级类型</el-button
                        >
                    </el-form-item>
                </el-form>
            </div> -->
            <div class="use_for_loading" v-loading="isLoading">
                <div style="margin-bottom: 20px">
                    <el-button type="primary" icon="el-icon-plus" @click="handleAddTypeA">新增一级类型</el-button>
                </div>
                <el-tree :data="data" :props="defaultProps" node-key="id">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }}</span>
                        <span style="margin-left: 20px">
                            <el-button
                                v-if="node.level == 1"
                                type="text"
                                class="color-Green"
                                icon="el-icon-circle-plus-outline"
                                size="mini"
                                @click.stop="NodeAdd(node, data)"
                            >
                                新增二级类型
                            </el-button>
                            <el-button type="text" icon="el-icon-edit" size="mini" @click.stop="NodeEdit(node, data)"> 编辑 </el-button>
                            <el-button
                                type="text"
                                class="color-red"
                                size="mini"
                                icon="el-icon-warning"
                                @click.stop="NodeDelete(node, data)"
                            >
                                删除
                            </el-button>
                        </span>
                    </span>
                </el-tree>
            </div>
        </div>
        <el-dialog title="新建一级类型" :visible.sync="addTypeAVisible" width="60%">
            <el-form ref="form" :model="addTypeAform" :rules="addTypeAformRules" label-width="140px">
                <el-form-item label="一级类型名称" prop="name">
                    <el-input v-model="addTypeAform.name" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
                <el-form-item label="一级类型英语名称" prop="foreignname">
                    <el-input v-model="addTypeAform.foreignname" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
                <el-form-item label="海关编码" prop="code">
                    <el-input v-model="addTypeAform.code" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
                <el-form-item label="材质/用途" prop="code">
                    <el-input v-model="addTypeAform.purpose" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
                <el-form-item label="货值单位" prop="code">
                    <el-input v-model="addTypeAform.unitvalue" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
                <el-form-item label="总价值" prop="code">
                    <el-input v-model="addTypeAform.totalvalue" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addTypeAVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveaddTypeA">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="编辑一级类型" :visible.sync="editTypeAVisible" width="60%">
            <el-form ref="form" :model="editTypeAform" :rules="editTypeAformRules" label-width="140px">
                <el-form-item label="一级类型名称" prop="name">
                    <el-input v-model="editTypeAform.name" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
                <el-form-item label="一级类型英语名称" prop="foreignname">
                    <el-input v-model="editTypeAform.foreignname" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
                <el-form-item label="海关编码" prop="code">
                    <el-input v-model="editTypeAform.code" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
                <el-form-item label="材质/用途" prop="code">
                    <el-input v-model="editTypeAform.purpose" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
                <el-form-item label="货值单位" prop="code">
                    <el-input v-model="editTypeAform.unitvalue" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
                <el-form-item label="总价值" prop="code">
                    <el-input v-model="editTypeAform.totalvalue" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editTypeAVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveeditTypeA">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="新建二级类型" :visible.sync="addTypeBVisible" width="60%">
            <el-form ref="form" :model="addTypeBform" :rules="addTypeBformRules" label-width="140px">
                <el-form-item label="一级类型名称" prop="typeaname">
                    <el-input v-model="addTypeBform.typeaname" maxlength="20" show-word-limit disabled class="formInput"></el-input>
                </el-form-item>
                <el-form-item label="二级类型名称" prop="name">
                    <el-input v-model="addTypeBform.name" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
                <el-form-item label="海关编码" prop="code">
                    <el-input v-model="addTypeBform.code" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
                <el-form-item label="材质/用途" prop="code">
                    <el-input v-model="addTypeBform.purpose" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
                <el-form-item label="货值单位" prop="code">
                    <el-input v-model="addTypeBform.unitvalue" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
                <el-form-item label="总价值" prop="code">
                    <el-input v-model="addTypeBform.totalvalue" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addTypeBVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveaddTypeB">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="编辑二级类型" :visible.sync="editTypeBVisible" width="60%">
            <el-form ref="form" :model="editTypeBform" :rules="editTypeBformRules" label-width="140px">
                <el-form-item label="一级类型名称" prop="typeaname">
                    <el-input v-model="editTypeBform.typeaname" maxlength="20" show-word-limit disabled class="formInput"></el-input>
                </el-form-item>
                <el-form-item label="二级类型名称" prop="name">
                    <el-input v-model="editTypeBform.name" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
                <el-form-item label="海关编码" prop="code">
                    <el-input v-model="editTypeBform.code" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
                <el-form-item label="材质/用途" prop="code">
                    <el-input v-model="editTypeBform.purpose" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
                <el-form-item label="货值单位" prop="code">
                    <el-input v-model="editTypeBform.unitvalue" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
                <el-form-item label="总价值" prop="code">
                    <el-input v-model="editTypeBform.totalvalue" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editTypeBVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveeditTypeB">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import API from '../../../api/index'; //读入restfulAPI
import StringTool from '../../../utils/StringTool';
import JSTool from '../../../utils/JSTool';

export default {
    name: 'goodTypeManage',
    mixins: [],

    data() {
        return {
            isLoading: false,
            addTypeAVisible: false,
            editTypeAVisible: false,
            addTypeBVisible: false,
            editTypeBVisible: false,

            addTypeAform: {
                name: '',
                code: '',
                foreignname: '',
                order: 0,
                purpose: '',
                unitvalue: '',
                totalvalue: ''
            },

            addTypeAformRules: {},
            editTypeAform: {
                name: '',
                code: '',
                foreignname: '',
                id: '',
                purpose: '',
                unitvalue: '',
                totalvalue: ''
            },
            editTypeAformRules: {},

            addTypeBform: {
                typeaid: '',
                typeaname: '',
                name: '',
                code: '',
                order: 0,
                purpose: '',
                unitvalue: '',
                totalvalue: ''
            },
            addTypeBformRules: {},
            editTypeBform: {
                typeaid: '',
                typeaname: '',
                name: '',
                code: '',
                id: '',
                purpose: '',
                unitvalue: '',
                totalvalue: ''
            },
            editTypeBformRules: {},

            data: [],
            defaultProps: {
                children: 'list',
                label: 'name'
            }
        };
    },
    created() {
        this.init();
        console.log('created');
    },
    mounted() {},
    methods: {
        //页面初始化
        init() {
            this.getData();
        },
        getData() {
            this.isLoading = true;
            API.StandardDoWith(API.Goodtypel.Get({ pageSize: 99, status: 1 }), this, {
                success: (detail) => {
                    this.data = detail.list;
                },
                complete: () => {
                    this.isLoading = false;
                }
            });
        },

        handleAddTypeA() {
            this.addTypeAform = {
                name: '',
                code: '',
                foreignname: '',
                order: this.data.length + 1,
                purpose: '',
                unitvalue: '',
                totalvalue: ''
            };
            this.addTypeAVisible = true;
        },

        saveaddTypeA() {
            API.StandardDoWith(API.Goodtypel1.Post(this.addTypeAform), this, {
                success: (detail) => {
                    this.$message.success(`成功添加一级分类`);
                    this.addTypeAVisible = false;
                    this.getData();
                }
            });
        },

        saveeditTypeA() {
            API.StandardDoWith(API.Goodtypel1.Put(this.editTypeAform), this, {
                success: (detail) => {
                    this.$message.success(`成功修改一级分类`);
                    this.editTypeAVisible = false;
                    this.getData();
                }
            });
        },
        saveaddTypeB() {
            API.StandardDoWith(API.Goodtypel2.Post(this.addTypeBform), this, {
                success: (detail) => {
                    this.$message.success(`成功添加二级分类`);
                    this.addTypeBVisible = false;
                    this.getData();
                }
            });
        },

        saveeditTypeB() {
            API.StandardDoWith(API.Goodtypel2.Put(this.editTypeBform), this, {
                success: (detail) => {
                    this.$message.success(`成功修改二级分类`);
                    this.editTypeBVisible = false;
                    this.getData();
                }
            });
        },
        NodeAdd(node, data) {
            this.addTypeBform = {
                parentid: data.id,
                typeaname: data.name,
                order: data.list.length + 1,
                purpose: '',
                unitvalue: '',
                totalvalue: ''
            };
            this.addTypeBVisible = true;
        },
        NodeEdit(node, data) {
            if (node.level == 1) {
                this.editTypeAform = JSTool.DeepClone(data);
                this.editTypeAVisible = true;
            } else {
                this.editTypeBform = JSTool.DeepClone(data);
                this.editTypeBform.typeaid = node.parent.data.id;
                this.editTypeBform.typeaname = node.parent.data.name;
                this.editTypeBVisible = true;
            }
        },
        NodeDelete(node, data) {
            this.$confirm(`确定要删除${data.name}吗？`, '提示', {
                type: 'warning'
            })
                .then(() => {
                    if (node.level == 1) {
                        API.StandardDoWith(API.Goodtypel1.Delete({ id: data.id }), this, {
                            loading: '删除处理中',
                            success: (detail) => {
                                this.$message.success(`成功删除一级分类`);
                                this.getData();
                            }
                        });
                    } else {
                        API.StandardDoWith(API.Goodtypel2.Delete({ id: data.id }), this, {
                            loading: '删除处理中',
                            success: (detail) => {
                                this.$message.success(`成功删除二级分类`);
                                this.getData();
                            }
                        });
                    }
                })
                .catch(() => {});
        }
    }
};
</script>

<style scoped>
@import '../../../assets/css/dataTable.css';
.excel {
    width: 100%;
}
.excel table {
    margin: 0 auto;
    text-align: center;
    border: 1px solid gray;
}
.excel table tr td {
    margin: 5px 10px;
    padding: 5px;
    border: 1px solid gray;
}
</style>
